<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" 
  xmlns:h="http://java.sun.com/jsf/html" xmlns:pr="http://java.sun.com/jsf/composite/totororo"
  template="../template_front.xhtml">
  <ui:define name="content">  
  
    
    <p:growl id="messages" /> 
    
      <h1>Page de paiement</h1>
      
      <p:panelGrid id="grid" columns="1" rows="2">
	    	<h:form id="contentForm">
	           
		       <h:outputLabel value="Total commande : #{orderController.tempOrder.total} euros "/>
		     
		     <h:outputLabel for="numero" value="Numero carte bancaire"/>
		     <p:inputMask id="numero" value="#{paiementController.paiement.numero}" mask="9999-9999-9999-9999" required="true" requiredMessage="Paiement : Veuillez saisir le numero CB (16 chiffres)"/>
		     <p:message id="numero1" for="numero" />
		     
		     <h:outputLabel for="dateExpirationChamps1" value="Champs 1 Date" />
		     <p:inputMask id="dateExpirationChamps1" value="#{paiementController.paiement.dateExpirationChamps1}" mask="99" required="true" requiredMessage="Paiement : Veuillez saisir le mois d'expiration"/>
		     <p:message id="dateExpirationChamps21" for="dateExpirationChamps1" />
		     
		     <h:outputLabel for="dateExpirationChamps2" value="Champs 2 Date" />
		     <p:inputMask id="dateExpirationChamps2" value="#{paiementController.paiement.dateExpirationChamps2}"  mask="99"  required="true" requiredMessage="Paiement : Veuillez saisir l'annee d'expiration"/>
		     <p:message id="dateExpirationChamps22" for="dateExpirationChamps2" />
		                     
		     <h:outputLabel for="chiffres" value="Chiffres"/>
		     <p:inputMask id="chiffres" value="#{paiementController.paiement.chiffres}"  mask="999" required="true" requiredMessage="Paiement : Veuillez saisir les 3 derniers chiffres"/>
		     <p:message id="chiffres1" for="chiffres" />
		     
		      <p:commandButton ajax="false" actionListener="#{paiementController.createPaiement}" value="Valider le paiement" update="messages">
		       <f:param name="orderId" value="#{orderController.tempOrder.id}"/>
		      </p:commandButton> 

	    	</h:form>  
      </p:panelGrid>
      

<p:messages globalOnly="true" />

  </ui:define>
</ui:composition>